<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/auth.css">
    <link rel="stylesheet" href="assets/css/background.css">
</head>
<body>
    <!-- 背景几何图形 -->
    <div class="bg-shapes">
        <div class="shape circle bg-element-1"></div>
        <div class="shape square bg-element-2"></div>
        <div class="shape circle bg-element-3"></div>
        <div class="shape plus bg-element-4">+</div>
        <div class="shape dna bg-element-5"></div>
        <div class="shape circle bg-element-6"></div>
        <div class="shape square bg-element-7"></div>
    </div>

    <!-- 修改密码表单 -->
    <div class="auth-container">
        <div class="auth-header">
            <h1>修改密码</h1>
            <p>请输入您的账号信息修改密码</p>
        </div>

        <div id="error-message" class="message error" style="display: none;"></div>
        <div id="success-message" class="message success" style="display: none;"></div>

        <form id="change-password-form">
            <div class="form-group">
                <label for="loginId">用户名或邮箱</label>
                <input type="text" id="loginId" name="loginId" placeholder="请输入用户名或邮箱" required>
            </div>

            <div class="form-group">
                <label for="oldPassword">原密码</label>
                <input type="password" id="oldPassword" name="oldPassword" placeholder="请输入原密码" required>
            </div>

            <div class="form-group">
                <label for="newPassword">新密码</label>
                <input type="password" id="newPassword" name="newPassword" placeholder="请输入新密码（至少6位）" required minlength="6">
            </div>

            <div class="form-group">
                <label for="confirmPassword">确认新密码</label>
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入新密码" required>
            </div>

            <button type="submit" class="auth-btn" id="submit-btn">修改密码</button>

            <div class="auth-link">
                <a href="login.html">返回登录</a>
            </div>
        </form>
    </div>

    <script>
        document.getElementById('change-password-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const loginId = document.getElementById('loginId').value;
            const oldPassword = document.getElementById('oldPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const submitBtn = document.getElementById('submit-btn');
            const errorMessage = document.getElementById('error-message');
            const successMessage = document.getElementById('success-message');

            // 隐藏消息
            errorMessage.style.display = 'none';
            successMessage.style.display = 'none';

            // 表单验证
            if (!loginId) {
                showError('请输入用户名或邮箱');
                return;
            }

            if (!oldPassword) {
                showError('请输入原密码');
                return;
            }

            if (!newPassword) {
                showError('请输入新密码');
                return;
            }

            if (newPassword.length < 6) {
                showError('新密码长度至少6位');
                return;
            }

            if (newPassword !== confirmPassword) {
                showError('两次输入的新密码不一致');
                return;
            }

            if (oldPassword === newPassword) {
                showError('新密码不能与原密码相同');
                return;
            }

            // 禁用提交按钮
            submitBtn.disabled = true;
            submitBtn.textContent = '修改中...';

            try {
                // 调用修改密码API
                const response = await fetch('http://localhost:8080/chm/api/auth/change-password', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    mode: 'cors',
                    credentials: 'omit',
                    body: JSON.stringify({
                        loginId: loginId,
                        oldPassword: oldPassword,
                        newPassword: newPassword
                    })
                });

                const result = await response.json();

                if (result.status === 0) {
                    showSuccess('密码修改成功！正在跳转到登录页...');
                    
                    // 3秒后跳转到登录页
                    setTimeout(() => {
                        window.location.href = 'login.html';
                    }, 3000);
                } else {
                    showError(result.msg || '密码修改失败');
                }
            } catch (error) {
                showError('网络错误，请检查网络连接');
                console.error('修改密码请求失败:', error);
            } finally {
                // 恢复提交按钮
                submitBtn.disabled = false;
                submitBtn.textContent = '修改密码';
            }
        });

        function showError(message) {
            const errorMessage = document.getElementById('error-message');
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
        }

        function showSuccess(message) {
            const successMessage = document.getElementById('success-message');
            successMessage.textContent = message;
            successMessage.style.display = 'block';
        }
    </script>
</body>
</html>